import React, { useState, useRef, useEffect } from 'react';
import { connect } from 'dva';
import { Radio, Card, Button } from 'antd';
import { LineChartOutlined, BarChartOutlined, PieChartOutlined, DownloadOutlined, FileImageOutlined, PictureOutlined, FileExcelOutlined } from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react';
import html2canvas from 'html2canvas';
import XLSX from 'xlsx';

let obj = {};
for(let i =0; i<24;i++) {
    obj[(i<10?'0'+i:i) + ':00'] = Math.round(Math.random() * 30) + 20
}

function LineChart({ data, name, color, title }) {
    data = obj;
    const echartsRef = useRef();
    const textColor = '#fff';
    let seriesData = [], category = [], valueData = [];
    Object.keys(data).forEach(key=>{
        category.push(key);
        valueData.push(data[key]);
    })
    let option = {
        type:'line',
        symbol:'none',
        name:title,
        itemStyle:{ color },
        data:valueData,
        areaStyle:{
            color:{
                type:'linear',
                x:0,
                y:0,
                x2:0,
                y2:1,
                colorStops: [{
                    offset: 0, color: color.substring(0, color.length-1) +  ', 0.55)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'transparent' // 100% 处的颜色
                }],
            }
        }
    }
    
    seriesData.push(option);
    
    return (   
        
            <ReactEcharts
                notMerge={true}
                ref={echartsRef}
                style={{ width:'100%', height:'100%'}}
                option={{
                    tooltip:{
                        trigger:'axis'
                    },
                    title:{
                        show:false
                    },
                    grid:{
                        top:20,
                        left:20,
                        right:20,
                        bottom:10,
                        containLabel:true
                    },
                    xAxis:{
                        type:'category',
                        data:category,
                        axisLabel:{
                            color:textColor,
                            // formatter:(value)=>{
                            //     let strArr = value.split('-');
                            //     return strArr.length ? strArr[2] : value;
                            // }
                        },
                        axisLine:{
                            show:true,
                            lineStyle:{ color:'#01406a' }
                        },
                        splitLine:{
                            show:true,
                            lineStyle:{
                                color: 'rgba(1, 64, 106, 0.25)' 
                            }
                        },
                        axisTick:{
                            show:false
                        }
                    },
                    yAxis:[
                        {
                            type:'value',
                           
                            splitLine:{
                                show:true,
                                lineStyle:{
                                    color: 'rgba(1, 64, 106, 0.25)' 
                                }
                            },
                            axisTick:{ show:false },
                            axisLabel:{
                                color:textColor
                            },
                            axisLine:{
                                show:false,
                                lineStyle:{ color:'#01406a' }

                            }
                        }
                    ],                  
                    series:seriesData
                }}
        />         
    );
}

export default React.memo(LineChart);
